<%--
  Created by IntelliJ IDEA.
  User: 兀兀
  Date: 2019/11/22
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/commonPage/common.jsp"%>
<html>
<head>
<title>首页轮播图管理</title>
</head>
<style>
.layui-table-cell {
	height: 50px;
	line-height: 50px;
}
</style>
<script type="text/html" id="rotationimg">
	<img src="{{d.imgUrl}}" style=" height: 100%;">
</script>
<body style="overflow: hidden;">

	<div id="popupWin" style="margin: 50px; display: none;">
		<a style="display: none;" id="id"></a>
		<form class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<label class="layui-form-label">图片名称</label>
				<div class="layui-input-block">
					<input type="text" name="title" id="title" required
						lay-verify="required" placeholder="请图片名称" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-upload">
					<div class="layui-upload-list">
						<img class="layui-upload-img" id="imgUrl"
							style="width: 385px; height: 230px;">
						<button type="button" class="layui-btn" id="uploadimg">
							<i class="layui-icon"></i>更新图片
						</button>
						<button type="button" class="layui-btn layui-hide"
							id="startupload">开始上传</button>
					</div>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">图片描述</label>
				<div class="layui-input-block">
					<textarea name="context" id="context" placeholder="请输入图片描述"
						class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea name="remark" id="remark" placeholder="请输入备注"
						class="layui-textarea"></textarea>
				</div>
			</div>

		</form>
	</div>

	<%--顶部工具栏--%>
	<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="addBtn">添加</button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteBtn">删除</button>
    </div>
</script>
	<div style="width: 100%; height: 100%; background: #fff;">
		<table class="layui-hide" id="center-table" lay-filter="center-table"
			style="height: 100%; overflow: hidden; background: #fff;"></table>
	</div>
</body>
<script>
	layui.use([ 'table', 'laydate', 'upload' ], function() {
		var table = layui.table;
		var upload = layui.upload;
		var laydate = layui.laydate;
		var addIndex = ''

		table.render({
			elem : '#center-table',
			type : "post",
			toolbar : "#toolbar",
			url : '${base}/admin/rotationManagerController/listRotation',
			page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
				layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ] //自定义分页布局
				//,curr: 5 //设定初始在第 5 页
				,
				groups : 2 //只显示 1 个连续页码
				,
				first : false //不显示首页
				,
				last : false //不显示尾页
				,
				position : 'bottom'
			},
			height : $(document).height() - $('#center-table').offset().top - 20,
			cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			,
			cols : [ [ {
				type : 'checkbox',
				field : 'id',
				fixed : 'left'
			}, {
				field : 'title',
				title : '标题',
				sort : true,
				align : 'center',
				event : 'detial',
				fixed : 'left'
			}, {
				field : 'imgUrl',
				title : '图片地址',
				templet : "#rotationimg",
				event : 'detial',
				sort : true
			}, {
				field : 'context',
				event : 'detial',
				title : '图片介绍'
			}, {
				field : 'remark',
				event : 'detial',
				title : '备注'
			} ] ],
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code" : res.code, //解析接口状态
					"count" : res.total, //解析数据长度
					"data" : res.data
				//解析数据列表
				};
			}
		});

		//头工具栏事件
		table.on('toolbar(center-table)', function(obj) {
			switch (obj.event) {
			case "addBtn":
				$("#id").val('');
				$("#title").val('');
				$("#imgUrl").attr('src', '');
				$("#context").val('');
				$("#remark").val('');
				layer.open({
					type : 1,
					title : '添加',
					area : '60%',//['60%','60%'],
					content : $("#popupWin"), //弹出窗口
					btn : [ '添加', '取消' ],
					yes : function(index, layero) {
						if ($("#title").val() == '' || $("#context").val() == '' || $("#imgUrl").attr('src') == undefined) { //验证必填信息是否填写
							layer.alert('请确认标题、图片和描述等内容不为空哟', {
								icon : 5,
								title : "提示"
							});
							return;
						} else {
							$.ajax({
								type : "post",
								dataType : "json",
								url : '${base}/admin/rotationManagerController/addRotationFunc',
								data : {
									title : $("#title").val(),
									context : $("#context").val(),
									imgUrl : $("#imgUrl").attr('src'),
									remark : $("#remark").val()
								},
								success : function(data) {
									if (data.result) {
										layer.msg("添加成功！");
										layer.close(index);
										table.reload("center-table");
									} else {
										layer.msg(data.message);
									}
								}
							})
						}
					}
				});
				break;
			case "deleteBtn":
				var checkStatus = table.checkStatus(obj.config.id);
				var data = checkStatus.data;
				var ids = new Array();
				data.forEach(function(n, i) {
					ids.push(n.id);
				});
				if (ids != '') {
					$.ajax({
						type : "post",
						dataType : "json",
						url : '${base }/admin/rotationManagerController/deleteRotationFunc',
						data : {
							ids : ids
						},
						success : function(data) {
							if (data.result) {
								layer.msg("删除成功！");
								table.reload("center-table");
							} else {
								layer.msg(data.message);
							}
						}
					})
				} else {
					layer.msg("请选择需要删除的行！");
				}
				break;
			}

		});

		//监听行单击事件（双击事件为：rowDouble）
		/* table.on('row(center-table)', function(obj) {
			//选中行，勾选复选框
			obj.tr.find("div.layui-unselect.layui-form-checkbox")[1].click();
			layer.msg("单击选择，双击查看/修改");
		}); */

		//监听行双击事件（双击事件为：rowDouble）
		table.on('tool(center-table)', function(obj) {
			var data = obj.data;
			$("#id").val(data.id);
			$("#title").val(data.title);
			$("#context").val(data.context);
			$("#imgUrl").attr('src', data.imgUrl);
			$("#remark").val(data.remark);
			if (obj.event === "detial") {
				layer.open({
					type : 1,
					title : '详细信息',
					area : '60%',//['60%','60%'],
					content : $("#popupWin"), //弹出窗口
					btn : [ '修改', '关闭' ],
					yes : function(index, layero) {
						if ($("#title").val() == '' || $("#context").val() == '' || $("#imgUrl").attr('src') == undefined) { //验证必填信息是否填写
							layer.alert('请确认标题、图片和描述等内容不为空哟', {
								icon : 5,
								title : "提示"
							});
							return;
						} else {
							$.ajax({
								type : "post",
								dataType : "json",
								url : '${base}/admin/rotationManagerController/updateRotationFunc',
								data : {
									id : $("#id").val(),
									title : $("#title").val(),
									context : $("#context").val(),
									imgUrl : $("#imgUrl").attr('src'),
									remark : $("#remark").val()
								},
								success : function(data) {
									if (data.result) {
										layer.msg("修改成功！");
										layer.close(index);
										table.reload("center-table");
									} else {
										layer.msg(data.message);
									}
								}
							})
						}
					}
				});
			}
		})

		/**
		 * @return {number}
		 */
		function LoadWait(WaitText) {
			WaitText = '' + WaitText;
			var index = 0;
			layui.use('layer', function() {
				var layer = layui.layer;
				index = layer.msg('<h3>' + WaitText + '</h3>', {
					zIndex : 20161231//更改窗口层次
					,
					icon : 16,
					time : 0//不自动关闭
					,
					anim : 1,
					shade : [ 0.1, '#FFF' ]
				});
			});
			return index;
		}

		//更新图片方法
		var editimg = upload.render({
			elem : '#uploadimg',
			url : '${base}/fileUpload',
			accept : 'images',
			acceptMime : 'image/*',
			size : '1024',
			before : function(obj) {
				loadingindex = LoadWait("正在更新信息，请稍后！"); //上传loading
			},
			choose : function(obj) { //选择文件后的回调函数。返回一个object参数
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result) {
					$('#imgUrl').attr('src', result); //图片链接（base64）
				});
			},
			done : function(res) {
				//上传完毕回调
				if (res.result) {
					layer.msg("上传成功！");
					$("#imgUrl").attr('src', res.message)
				} else {
					layer.msg("上传失败！");
				}
				layer.closeAll(loadingindex); //关闭loading
			}
		});

	});
</script>
</html>
